<template>
  <q-page class="wait-page">
    <BackHeader title="" fixed bg="transparent" />

    <section class="q-px-md q-my-md" style="overflow: hidden">
      <div class="q-mt-md" style="font-weight: 500; font-size: 24px">额度申请</div>
      <div class="q-mt-xs" style="color: #999">完善身份验证，助您快速获得额度</div>
    </section>

    <section class="bg-white q-mt-sm q-px-md">
      <q-responsive :ratio="750 / 752">
        <div class="loading-box center">
          <div class="center" style="font-weight: bold; font-size: 20px">{{ loadingTextTop }}</div>
          <div class="center" v-show="[1, 3, 4].includes(step)" style="font-size: 17px">
            {{ loadingTextBottom }}
          </div>
        </div>
      </q-responsive>

      <div class="q-my-md">
        <template v-if="step === 1">
          <div class="flex items-center justify-between">
            <div class="">实名认证</div>
            <div class="flex items-center">
              <div style="color: #fb7a13">待完成</div>
              <div class="center q-ml-xs">
                <img src="~/assets/images/waitpage/right.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="step === 2">
          <div class="flex items-center justify-between">
            <div class="">实名认证</div>
            <div class="flex items-center">
              <div class="center">
                <img src="~/assets/images/waitpage/ok.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="flex items-center justify-between">
            <div class="">实名认证</div>
            <div class="flex items-center">
              <div class="center">
                <img src="~/assets/images/waitpage/ok.png" style="width: 14px" />
              </div>
            </div>
          </div>
          <div class="flex items-center justify-between q-mt-sm">
            <div class="">征信协议</div>
            <div class="flex items-center">
              <div class="center">
                <img src="~/assets/images/waitpage/ok.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute();

const step = ref(1);
const loadingTextTop = computed(() => {
  const indexMap = ['身份核验', '待完成', '身份信息', '开通中', '开通成功'];
  return indexMap[step.value - 1] ?? '开通成功';
});
const loadingTextBottom = computed(() => {
  const indexMap = ['待完成', '', '已完善', '…'];
  return indexMap[step.value - 1] ?? '';
});

const stepRun = () => {
  const time = (Math.random() * 1401) + 800;
  setTimeout(() => {
    step.value++
    if (step.value < 5) {
      stepRun()
    } else {
      setTimeout(() => {
        router.replace({path: '/mechanism', query: route.query})
      }, 400)
    }
  }, time)
}
stepRun()
</script>

<style lang="scss" scoped>
.wait-page {
  background-color: #fff;
  background-image: url(src/assets/images/waitpage/header.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.loading-box {
  background: url(src/assets/images/waitpage/loading.gif) no-repeat;
  background-size: 100% 100%;
}
</style>
